<template>
	<view class="box box-card">
		<uni-forms ref="userForm" :modelValue="userForm" errShowType="toast" labelWidth="70px">
			<uni-forms-item name="userPhoto" labelWidth="0px">
				<view class="user-photo">
					<uploadAvatar :url="userForm.userPhoto" @success="uploadImage"></uploadAvatar>
					<view style="text-align: center; margin-top: 10px;">更换头像</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="nikename" label="昵称">
				<uni-easyinput v-model="userForm.nikename" placeholder="昵称" maxlength="20"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="sex" label="性别">
				<picker mode="selector" @change="changeSex" :value="userForm.sex" :range="sexList" range-key="name">
					<view class="box-flex-between">
						<view class="text-view">{{sexList[userForm.sex].name}}</view>
						<uni-icons type="forward"></uni-icons>
					</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item name="birthday" label="出生日期">
				<picker mode="date" @change="changeBirthday" :value="userForm.birthday">
					<view class="box-flex-between">
						<view class="text-view">{{userForm.birthday}}</view>
						<uni-icons type="forward"></uni-icons>
					</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item name="signature" labelWidth="0px">
				<view class="uni-mb-8 uni-mt-3">个性签名</view>
				<uni-easyinput type="textarea" v-model="userForm.signature" maxlength="100" :inputBorder="true">
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<view class="uni-mt-10">
			<button class="form-button uni-mt-10" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	import uploadAvatar from '@/components/upload/uploadAvatar.vue'
	export default {
		components: {
			uploadAvatar
		},
		data() {
			return {
				userForm: {
					userPhoto: '',
					nikename: '',
					sex: 1,
					birthday: '',
					signature: ''
				},
				sexList: [{
					id: '0',
					name: '女'
				}, {
					id: '1',
					name: '男'
				}, {
					id: '2',
					name: '未知'
				}],
				formRules: {
					nikename: {
						rules: [{
							required: true,
							errorMessage: '请输入昵称'
						}]
					}
				}
			};
		},
		onLoad() {
			this.$api.post('/appUser/getUserInfo').then(res => {
				this.userForm = {
					userPhoto: res.data.userPhoto,
					nikename: res.data.nikename,
					sex: res.data.sex ? res.data.sex : '0',
					birthday: res.data.birthday ? res.data.birthday : '',
					signature: res.data.signature
				}
			})
		},
		methods: {
			uploadImage(e) {
				this.userForm.userPhoto = e;
			},
			changeSex(e) {
				this.userForm.sex = e.detail.value;
			},
			changeBirthday(e) {
				this.userForm.birthday = e.detail.value;
			},
			save() {
				this.$refs.userForm.validate().then(() => {
					this.$api.post('/appUser/updateUserInfo', this.userForm).then(res => {
						uni.reLaunch({
							url: '/pages/my/my',
							success: () => {
								this.$util.messageTip(res.message);
							}
						})
					}).catch(err => {
						this.$util.messageTip(err.message);
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-photo {
		padding: 10px 0;

		/deep/ .uni-file-picker__container {
			justify-content: center;
		}
	}
</style>
